<template>
    <div class="model-card" @click="props.custonFunction">
        <n-avatar class="model-card-logo" size="medium"
            :src="props.icon" />
        <n-tooltip trigger="hover">
            <template #trigger>
                <span class="model-card-title">{{ props.name }}</span>
            </template>
            {{ props.name }}
        </n-tooltip>
    </div>
</template>
<script lang="ts" setup>
import { defineProps } from 'vue';
const props = defineProps(['name', 'icon', 'custonFunction', 'id'])
</script>
<style lang="less" scoped>
.model-card {
    cursor: pointer;
    border: 1px solid var(--n-border-color);
    border-radius: 8px;
    transition: box-shadow .5s, border-color .5s;
    padding: 8px;
    vertical-align: middle;
    white-space: nowrap;
    /* 保持文本在一行内 */
    overflow: hidden;
    /* 隐藏溢出的文本 */
    text-overflow: ellipsis;
    /* 使用省略号表示溢出的文本 */
}

.model-card-logo {
    vertical-align: middle;
}

.model-card-title {
    vertical-align: middle;
    padding: 10px;
}
</style>